<%@page import="bll.CommonBll"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="util.*"%>
<%@page import="dal.*"%>
<%@ page import="model.*,java.util.*,java.text.*"%>
<%
	int id = MiscUtil.getIntUrlParam(request, "id");
	
	ProjectModel project;
	{
		GenericDal<ProjectModel, ProjectModelExt> dal = new GenericDal<ProjectModel, ProjectModelExt>(
				new ProjectModel());
		ProjectModel query = new ProjectModel();
		query.setId(id);	
		project = dal.select(query);
	}
	
	List<ChecklistModel> checklistList; 
	{
		GenericDal<ChecklistModel, ChecklistModelExt> dal = new GenericDal<ChecklistModel, ChecklistModelExt>(
				new ChecklistModel());
		ChecklistModelExt query = new ChecklistModelExt();
		query.setIdProject(id);
		checklistList = dal.selectList(query);
		
		for(ChecklistModel ckb : checklistList)	{
	 		CommonBll.loadOrganziedChecklistItems(ckb);	
	 	}
	}
	
 	List<ChecklistItemModel> items = new ArrayList<ChecklistItemModel>();
 	for(ChecklistModel ckb : checklistList)	{
 		List<ChecklistItemModel> list = ckb.getItems();
 		for ( ChecklistItemModel item : list) {
 			items.add(item);
 		}
 	}
	
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel='stylesheet' type='text/css' href='css/common.css' />

<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.js"></script>
<script type="text/javascript" src="js/data.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.ganttView.css" />
<script type="text/javascript" src="js/jquery.ganttView.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.4.css" />

<script type="text/javascript">
	
	var ganttData = [
	                 
             <%
             boolean firstItem = true;                
		     for (int i=0; i< items.size(); i++)
		     { 
		    	 ChecklistItemModel obj = items.get(i);
		    	 
		    	 Date start = obj.getTotalStartTime();
		    	 Date end = obj.getTotalEndTime();				    	 
		    	 
		    	 if ( start != null && end != null) 
		    	 {			    	 
			    	 SimpleDateFormat simpleDateformat=new SimpleDateFormat("yyyy");			    	 
			    	 String ys = simpleDateformat.format(start);
			    	 int ms = start.getMonth();
			    	 int ds = start.getDate();
			    	 
			    	 String ye = simpleDateformat.format(end);
			    	 int me = end.getMonth();
			    	 int de = end.getDate();
		     %>			     
				     <%
				     if (!firstItem){
			    	 %>
			    	 	,
			    	 <%
			    	 }
				     firstItem  = false;
			    	 %>
		    	 
			    	 	{
			    	 		id: 1, name: "<%=obj.getName()%>", series: [
			    	 			{ name: "", start: new Date(<%=ys%>,<%=ms%>,<%=ds%>), end: new Date(<%=ye%>,<%=me%>,<%=de%>) }
			    	  		]
		    	  		}
			    	 	
			<%
		    	 }
		     }
			%>
       ];
	
// 	{
<%-- 		id: 1, name: "<%=obj.getName()%>", series: [ --%>
<%-- 			{ name: "Planned", start: new Date(<%=ys%>,<%=ms%>,<%=ds%>), end: new Date(<%=ye%>,<%=me%>,<%=de%>) }, --%>
<%-- 			{ name: "Actual", start: new Date(<%=ys%>,<%=ms%>,<%=ds%>), end: new Date(<%=ye%>,<%=me%>,<%=de%>), color: "red" } --%>
// 		]
// 		}
	
//	{
//	id: 1, name: "Feature 1", series: [
//		{ name: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
//		{ name: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
//	]
//}, 
//{
//	id: 2, name: "Feature 2", series: [
//		{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
//		{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
//		{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
//	]
//}, 
//{
//	id: 3, name: "Feature 3", series: [
//		{ name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) },
//		{ name: "Actual", start: new Date(2010,00,15), end: new Date(2010,01,03), color: "#f0f0f0" }
//	]
//}, 
//{
//	id: 4, name: "Feature 4", series: [
//		{ name: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
//		{ name: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
//	]
//},
//{
//	id: 5, name: "Feature 5", series: [
//		{ name: "Planned", start: new Date(2010,02,01), end: new Date(2010,03,20) },
//		{ name: "Actual", start: new Date(2010,02,01), end: new Date(2010,03,26), color: "#f0f0f0" }
//	]
//}, 
//{
//	id: 6, name: "Feature 6", series: [
//		{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
//		{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
//		{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,20), color: "#e0e0e0" }
//	]
//}, 
//{
//	id: 7, name: "Feature 7", series: [
//		{ name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) }
//	]
//}, 
//{
//	id: 8, name: "Feature 8", series: [
//		{ name: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
//		{ name: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
//	]
//}


	$(function() {
		$("#ganttChart").ganttView(
				{
					data : ganttData,
					slideWidth : 650,
					behavior : {
						onClick : function(data) {
							var msg = "You clicked on an event: { start: "
									+ data.start.toString("M/d/yyyy")
									+ ", end: " + data.end.toString("M/d/yyyy")
									+ " }";
							//$("#eventMessage").text(msg);
							//alert(msg);
						},
						onResize : function(data) {
							var msg = "You resized an event: { start: "
									+ data.start.toString("M/d/yyyy")
									+ ", end: " + data.end.toString("M/d/yyyy")
									+ " }";
							//$("#eventMessage").text(msg);
							alert(msg);
						},
						onDrag : function(data) {
							var msg = "You dragged an event: { start: "
									+ data.start.toString("M/d/yyyy")
									+ ", end: " + data.end.toString("M/d/yyyy")
									+ " }";
							//$("#eventMessage").text(msg);
							alert(msg);
						}
 					}
				});

		// $("#ganttChart").ganttView("setSlideWidth", 600);
	});
</script>
</head>
<body>
	<div class="divContainer">
	<jsp:include page="menu.jsp"></jsp:include>
	<br />
	<div class="divProjectBody" style="float: left; width: 100%;">
		<table border="1" align="center" class="tblStandard">
			<tr class="trStandard" style="color: red; font-weight: bold; height: 100px; ">
				<td class="tdStandard" style="width: 200px; vertical-align: top; color: red; font-weight: bold; text-align: center;" >
					<br />
					<br />
					PROJECT INFO HERE
				</td>
				<td class="tdStandard" style="text-align:center; vertical-align: middle; ">
					<%=project.getNameToString()%>
					<br />
					<br />
					PROJECT HEALTH HERE					
				</td>
				<td style="vertical-align: middle; text-align: center;">
					SMS chat box here
				</td>
			<tr class="trStandard">
				<td class="tdStandard" rowspan="4" style="vertical-align: top; color: red; font-weight: bold; text-align: center; ">
					<br />
					<br />
					OTHER PROJECTS HERE
				</td>				
				<td class="tdStandard" style="width: 500px; height:200px; padding-top: 3px; ">
					<div id="ganttChart"></div>
				</td>
				<td class="tdStandard" style="width: 200px; vertical-align: top; color: red; font-weight: bold; text-align: center; ">
					<br />
					<br />
					TODO LIST HERE
				</td>
			</tr>
			<tr class="trStandard">
				<td colspan="2" class="tdStandard" >
					<div style="color: red; padding-top: 5px; font-weight: bold;">AGENDAS</div>
					<%
						String agendaUrl = "agendaList.jsp?embedded=true&idProject=" + id;
					%>
					<jsp:include page="<%=agendaUrl%>"></jsp:include>
				</td>						
			</tr>
			<tr class="trStandard">
				<td colspan="2" class="tdStandard" >
					<div style="color: red; padding-top: 5px; font-weight: bold;">QUOTATIONS</div>					
					<%
						String quotationUrl = "quotationList.jsp?embedded=true&idProject=" + id;
					%>
					<jsp:include page="<%=quotationUrl%>"></jsp:include>
				</td>						
			</tr>
			<tr class="trStandard">
				<td colspan="2">
					<div style="color: red; padding-top: 5px; font-weight: bold;">CHECKLISTS</div>					
					<%
						String checklistUrl = "checklistList.jsp?embedded=true&idProject=" + id;
					%>
					<jsp:include page="<%=checklistUrl%>"></jsp:include>
				</td>					
			</tr>			
		</table>
		<br />
	</div>	
	</div>
</body>
</html>